<template>
  <view class="container">
    <scroll-view scroll-y="true" style="width: 100%; height: 100vh" v-if="Object.values(obj).length != 0">
      <!-- 地址 -->
      <view class="addaddress" v-if="false" @click="chooseaddress">+添加地址</view>
      <view class="address" v-else>
        <view v-if="false"></view>
        <view v-else class="addressbox">
          <view style="flex: 1">
            <view style="display: flex; align-items: center; font-weight: bold; font-size: 28rpx; color: #333333">
              <view style="margin-right: 20rpx">{{ obj.address_name }}</view>
              <view>{{ obj.address_mobile }}</view>
            </view>
            <view
              style="
                font-weight: 500;
                font-size: 24rpx;
                color: #333333;
                margin-top: 12rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
              "
            >
              {{ obj.address_detail }}
            </view>
          </view>
          <uni-icons type="right" size="20" color="#000"></uni-icons>
        </view>
      </view>
      <!-- 教师列表 -->
      <view class="teacherlist">
        <view class="listitem">
          <image :src="imgUrl + obj.teacher_avatar" mode="aspectFill" style="width: 186rpx; height: 186rpx"></image>
          <view class="right">
            <view class="righttop">
              <view style="display: flex; align-items: center">
                <view class="username">{{ obj.teacher_name }}</view>
                <view class="usercareer" v-if="obj.identity_name != ''">{{ obj.identity_name }}</view>
              </view>
              <view style="font-family: PingFang SC, PingFang SC; font-weight: 500; font-size: 26rpx; color: #222222">{{ obj.grade_name + '/' + obj.subject_name }}</view>
            </view>
            <view class="rightmiddel">
              <view class="teachage">教龄{{ obj.teaching_len }}年</view>
              <view class="money">￥{{ obj.price }}/起</view>
            </view>
            <view class="rightbottom">
              <view class="hobbylist">
                <view class="hobbyitem" v-for="(item, index) in obj.keyword" :key="index">{{ item }}</view>
              </view>
              <view class="long">{{ obj.distance }}km</view>
            </view>
          </view>
        </view>
      </view>
      <!-- 教学类别 -->
      <view class="title">教学类别</view>
      <view style="margin-top: 18rpx; margin-bottom: 36rpx; display: flex">
        <view :class="{ leibie: true, common: true }">
          <view style="font-family: PingFang SC, PingFang SC; font-weight: bold; font-size: 28rpx; color: #3553e8">{{ obj.bishop == 1 ? '主教' : '辅教' }}</view>
          <view style="font-family: PingFang SC, PingFang SC; font-weight: bold; font-size: 28rpx; color: #222222; margin: 18rpx 0">
            {{ obj.grade_name + ' - ' + obj.subject_name }}
          </view>
          <view style="font-family: PingFang SC, PingFang SC; font-weight: bold; font-size: 24rpx; color: #ff3400">{{ obj.price }}</view>
        </view>
      </view>

      <!-- 上课时间选择 -->
      <view class="title">上课时间选择</view>
      <view class="choosetime" @click="gochangesktiem">
        <view class="shijian">{{ obj.name_week }}</view>
        <uni-icons type="right" size="20" color="#222222"></uni-icons>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imgUrl: '',
      subjectindex: null,
      keshiindex: null,
      orderid: '', // 当前的订单id
      teacherid: '', // 当前教师的id
      obj: {}
    };
  },
  methods: {
    // 获取下单页面你的数据
    async getdata(id) {
      const res = await uni.$http.post('/user_order/details', {
        order_id: id
      });
      console.log('获取页面的数据', res.data.data);
      this.obj = res.data.data;
      // 获取教师详情
    },
    // 跳转到上课预约
    gochangesktiem() {
      uni.redirectTo({
        url: '/parents/changesktime/changesktime?teacherid=' + this.obj.teacher_id + '&orderid=' + this.obj.id + '&keshiid=' + this.obj.period_id
      });
    },
    // 选择上门地址
    chooseaddress() {
      uni.redirectTo({
        url: '/parents/addresslist/addresslist'
      });
    }
  },
  onLoad(e) {
    this.imgUrl = this.imgurl;
    if (e.id) {
      console.log(e.id);
      this.orderid = e.id;
      this.getdata(e.id);
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  padding: 30rpx 20rpx;
  .addaddress {
    box-sizing: border-box;
    width: 710rpx;
    height: 114rpx;
    text-align: center;
    line-height: 114rpx;
    font-weight: 500;
    font-size: 32rpx;
    color: #3553e8;
    background: #f9f9f9;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    margin-bottom: 32rpx;
  }
  .address {
    box-sizing: border-box;
    width: 710rpx;
    height: 146rpx;
    background: #f9f9f9;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    margin-bottom: 32rpx;
    .addressbox {
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      width: 710rpx;
      height: 146rpx;
    }
  }
  .teacherlist {
    .listitem {
      box-sizing: border-box;
      display: flex;
      width: 710rpx;
      height: 190rpx;

      margin-bottom: 30rpx;
      .right {
        flex: 1;
        margin-left: 20rpx;
        .righttop {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .usercareer {
            box-sizing: border-box;
            width: 104rpx;
            height: 40rpx;
            background: #eaedfd;
            border-radius: 10rpx 10rpx 10rpx 10rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 22rpx;
            color: #3553e8;
            text-align: center;
            line-height: 40rpx;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
          .username {
            font-family: PingFang SC, PingFang SC;
            font-weight: bold;
            font-size: 28rpx;
            color: #222222;
            margin-right: 14rpx;
          }
        }
        .rightmiddel {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 12rpx;
          .teachage {
            font-weight: 500;
            font-size: 26rpx;
            color: #222222;
          }
          .money {
            font-family: PingFang SC, PingFang SC;
            font-weight: bold;
            font-size: 24rpx;
            color: #ff3400;
          }
        }
        .rightbottom {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 40rpx;
          .hobbylist {
            display: flex;
            align-items: center;
            .hobbyitem {
              box-sizing: border-box;
              height: 40rpx;
              background: #ffffff;
              border-radius: 20rpx 20rpx 20rpx 20rpx;
              border: 1rpx solid #3553e8;
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 22rpx;
              color: #3553e8;
              margin-right: 10rpx;
              text-align: center;
              line-height: 30rpx;
              padding: 4rpx 12rpx;
              text-overflow: ellipsis; /* 溢出显示省略号 */
              overflow: hidden; /* 溢出隐藏 */
              white-space: nowrap; /* 强制不换行 */
            }
          }
          .long {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 28rpx;
            color: #222222;
          }
        }
      }
    }
  }
  .title {
    box-sizing: border-box;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 30rpx;
    padding-left: 12rpx;
    color: #222222;
    border-left: 8rpx solid #3553e8;
    margin: 20rpx 0;
  }
  .leibie {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 220rpx;
    height: 220rpx;
    margin-right: 20rpx;
    background: #f9f9f9;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    border: 2rpx solid #f1f1f1;
  }
  .common {
    background: #e6ebff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    border: 2rpx solid #3553e8;
  }

  .choosetime {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 700rpx;
    height: 100rpx;
    padding: 30rpx;
    background: #f9f9f9;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    .shijian {
      flex: 1;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #222222;
    }
  }
}
</style>
